<template>
  <div>
    <el-form :inline="true" :model="data.search">
      <el-form-item label="包名或方法名">
        <el-input
          v-model="data.search.name"
          placeholder="包名或方法名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="querySysLogSet">查询</el-button>
      </el-form-item>
    </el-form>
    <yu-table
      ref="yuTable"
      :tableData="data.tableData"
      :columns="data.tableData.columns"
    >
      <template #toolbar>
        <el-button-group class="ml-4">
          <el-button @click="add">
            <yu-icon iconName="tianjia" />
            新增</el-button
          >
          <el-button @click="syncBtn"
            ><yu-icon iconName="shujujieruceshi" />同步</el-button
          >
        </el-button-group>
      </template>

      <template v-slot:handleSlot="{ scopeData }">
        <el-button-group class="ml-4">
          <el-button
            text
            size="small"
            type="success"
            @click="editBtn(scopeData.row)"
            >编辑</el-button
          >
          <el-button
            text
            size="small"
            type="danger"
            @click="delRow(scopeData.row, scopeData.row.rowIndex - 1)"
            >删除
          </el-button>
        </el-button-group>
      </template>
    </yu-table>
    <yu-dialog :data="data.dialogConfig" v-model:isShow="data.isShow">
      <LogSetEdit :editData="data.editData" v-model:isShow="data.isShow" />
    </yu-dialog>
  </div>
</template>

<script setup>
import { reactive, toRefs, onMounted, getCurrentInstance } from 'vue';
import LogSetEdit from './LogSetEdit.vue';
const { proxy } = getCurrentInstance();
const data = reactive({
  search: {},
  tableData: { data: [], columns: [], tableArrts: {} },
  editData: {},
  dialogConfig: {},
  isShow: false,
});
data.tableData.columns = [
  { title: '屏蔽包名', key: 'packName', tooltip: true },
  { title: '屏蔽方法', key: 'methodName', tooltip: true },
  { title: '操作', slot: 'handleSlot', tooltip: true, width: 150 },
];
const add = () => {
  data.isShow = true;
  data.dialogConfig.width = '550px';
  data.dialogConfig.height = '200px';
  data.dialogConfig.title = '屏蔽新增';
  data.editData = {};
};
const querySysLogSet = async () => {
  data.tableData.data = await proxy.$api.system.querySysLogSet(data.search);
};
const editBtn = row => {
  data.isShow = true;
  data.dialogConfig.width = '550px';
  data.dialogConfig.height = '200px';
  data.dialogConfig.title = '修改';
  data.editData = row;
};
const delRow = async (row, index) => {
  proxy
    .$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
      let data = [];
      data.push(row);
      proxy.$api.system.delSysLogSet(data).then(res => {
        if (res.code != -1) {
          proxy.$message({
            type: 'success',
            message: res.msg,
          });
          yuTable.value.deleteRow(row);
        } else {
          proxy.$message({
            type: 'error',
            message: res.msg,
          });
        }
      });
    });
};
</script>
<style lang="scss" scoped></style>
